<template>
  <div class="textinfo_box">
    <div class="article-tag-form">


       <!-- 分类 -->
      <div class="form-section">
        <h3>文章分类</h3>
        <div class="checkbox-group">
          <label v-for="option in categorysOptions" :key="option.value" class="checkbox-label">
            <input
              type="radio"
              :value="option.value"
              name="articleCategorys"
              v-model="articleCategory"
            />
            {{ option.label }}
          </label>
        </div>
      </div>


      <!-- 添加标签 -->
      <div v-if="false" class="form-section">
        <h3>标签</h3>
        <div class="checkbox-group">
          <label v-for="option in tipsOptions" :key="option.value" class="checkbox-label">
            <input
              type="checkbox"
              :value="option.value"
              v-model="selectedTips"
            />
            {{ option.label }}
          </label>
        </div>
      </div>

      <!-- 添加封面 -->
      <div class="form-section">
        <h3>添加封面</h3>
        <div class="cover-upload">
          <button @click="triggerUpload">从本地上传</button>
          <input 
            type="file" 
            ref="fileInput" 
            accept="image/*" 
            style="display: none" 
            @change="handleFileChange"
          />
          <p v-if="!coverImage">暂无封面图片</p>
          <div v-if="coverImage" class="cover-preview">
            <img :src="coverImage" alt="封面图片" class="cover-image" />
            <button @click="removeCover" class="remove-cover-btn">×</button>
          </div>
        </div>
      </div>

      <!-- 文章摘要 -->
      <div class="form-section">
        <h3>文章摘要</h3>
        <textarea
          v-model="skecth"
          maxlength="256"
          style="resize: none;height: 120px;"
          placeholder="摘要：会在推荐、列表等场景外露，帮助读者快速了解内容"
        ></textarea>
        <p class="character-count">{{ skecth.length }} / 256</p>
      </div>

    

      <!-- 文章类型 -->
      <div class="form-section">
        <h3>文章类型</h3>
        <div class="checkbox-group">
          <label v-for="type in articleTypes" :key="type.value" class="checkbox-label">
            <input
              type="radio"
              name="articleType"
              :value="type.value"
              v-model="selectedArticleTypes"
            />
            {{ type.label }}
          </label>
        </div>
      </div>

      <!-- 可见范围 -->
      <div class="form-section">
        <h3>可见范围</h3>
        <div class="radio-group">
          <label v-for="option in visibilityOptions" :key="option.value" class="radio-label">
            <input
              type="radio"
              :value="option.value"
              v-model="visibility"
            />
            {{ option.label }}
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue';

// 封面图片数据
const coverImage = ref(null);
const coverFile = ref(null); // 存储文件对象
const fileInput = ref(null);

// 文章摘要
const skecth = ref('');

// 动态文章类型数据
const articleTypes = ref([
  { value: 'original', label: '原创' },
  { value: 'repost', label: '转载' },
  { value: 'translation', label: '翻译' },
]);

// 选中的文章来源类型
const selectedArticleTypes = ref('original');

// 动态可见范围数据
const visibilityOptions = ref([
  { value: 'all', label: '全部可见' },
  { value: 'private', label: '仅我可见' },
  { value: 'fans', label: '粉丝可见' },
  { value: 'vip', label: 'VIP可见' },
]);

// 选中的可见范围
const visibility = ref('all');

// 动态标签提示数据,采用二级标签的存储方案,做弹出分类
// 这个是一级标签
const tipsOptions = ref([
  { value: 'tech', label: '技术' },
  { value: 'life', label: '生活' },
  { value: 'design', label: '设计' },
  { value: 'reading', label: '阅读' },
  { value: 'travel', label: '旅行' },
  { value: "food", label: "美食" }
]);
// 二级标签


// 选中的标签（多选数组）
const selectedTips = ref([]);

// 选中文章分类
const articleCategory = ref()
const categorysOptions = ref([
{ value: 'tech', label: '技术' },
  { value: 'life', label: '生活' },
  { value: 'design', label: '设计' },
  { value: 'reading', label: '阅读' },
  { value: 'travel', label: '旅行' },
  { value: "food", label: "美食" }
])
// 触发文件上传
const triggerUpload = () => {
  fileInput.value.click();
};

// 处理文件选择
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  // 检查是否为图片
  if (!file.type.startsWith('image/')) {
    alert('请选择图片文件');
    return;
  }
  
  // 检查文件大小（可选，例如限制5MB）
  if (file.size > 5 * 1024 * 1024) {
    alert('图片大小不能超过5MB');
    return;
  }
  
  // 存储文件对象
  coverFile.value = file;
  
  // 创建预览
  const reader = new FileReader();
  reader.onload = (e) => {
    coverImage.value = e.target.result;
    console.log(coverImage.value)
  };
  reader.readAsDataURL(file);
  
  // 重置input，允许重复选择同一文件
  e.target.value = '';
};

// 移除封面
const removeCover = () => {
  coverImage.value = null;
  coverFile.value = null;
};


// 暴露数据和方法给父组件
defineExpose({
    getCoverFile: () => coverFile.value,
    getCoverImage: () => coverImage.value,
    getSkecth: () => skecth.value,
    getSelectedTips: () => selectedTips.value,
    getArticleTypes: () => selectedArticleTypes.value,
    getVisibility: () => visibility.value,
    getArticleCategory:()=>articleCategory.value,
    removeCover
});
</script>

<style scoped>
.textinfo_box {
  margin-top: 20px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  border: 1px solid #e0e0e0;
  width: 950px;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-tag-form {
  width: 100%;
}

.form-section {
  margin-bottom: 25px;
}

h2 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

h3 {
  color: #555;
  font-size: 18px;
  margin-bottom: 10px;
}

.cover-upload button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.cover-upload button:hover {
  background: linear-gradient(135deg, #0056b3, #003d80);
}

.cover-preview {
  position: relative;
  margin-top: 10px;
  display: inline-block;
}

.cover-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.remove-cover-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.remove-cover-btn:hover {
  background: #ff7875;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: vertical;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  outline: none;
}

.character-count {
  text-align: right;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.new-column-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #28a745, #218838);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.new-column-btn:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
}

.checkbox-group, .radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.checkbox-label, .radio-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  margin-right: 8px;
  cursor: pointer;
}

.backup-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
}

.backup-description {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
</style>